import { Button, Modal, Divider, Radio, Select, Input, notification } from 'antd';
import React, { useState, useEffect  } from 'react';
import Zmage from 'react-zmage'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useBoolean, useRequest } from '@umijs/hooks';
import {saveAuditInfo} from '../service';
import styles from './index.less';
import {API_URL} from '@/config/api';

const { confirm } = Modal;

const { Option } = Select;
const { TextArea } = Input;

const CheckList = props => {
	const { modalVisible, handleModal, examinePersonInfo, reloadTable, checkTrue, resetTrue, payTrue } = props;
	const [initNum, handleNum] = useState(0);
	const [count, handleCount] = useState(1);

	const { setTrue: disableBtnTrue, setFalse:disableBtnFalse } = useBoolean(true);

	const [disubmit, handleDisabled] = useState(false);

	// 记录被审核旅客信息
	const [submitD, handleSubmitD] = useState([]);

	// 记录失败原因
	const [reason, handleReason] = useState([]);
		
  useEffect(() => {
		if (examinePersonInfo) {
			handleSubmitD(examinePersonInfo.actUserInfo.map(v=>{
				return {...v, auditOpinion: 1}
			}));
			handleReason(examinePersonInfo.refuseList);
			handleCount(examinePersonInfo.actUserInfo.length)
		}
  },[examinePersonInfo])

	const options = reason.map(v=>{
		return (
			<Option key={v}>{v}</Option>
		)
	})

	// 点击下一步
	const nextStep = (v, i)=>{
		// handleSubmitD(Array.from(submitD));
		handleNum(initNum+1);
	};
	// 点击上一步
	const prevousStep = (v, i) => {
		// handleSubmitD(Array.from(submitD));
		handleNum(initNum -1)
	}

	// 提交审核单
	const {loading, run} = useRequest((data)=>saveAuditInfo(data), {
		manual: true,
		onSuccess: ()=>{
			notification.success({
				message: '成功',
				duration: 3,
				description: '操作完成'
			})
			reloadTable();
			handleModal(false);
			checkTrue();
			resetTrue();
			payTrue();
			handleNum(0);
		}
	})
	// 提交
	const submitData = () => {
		confirm({
			title: '提示',
			content: (
				<div style={{fontSize: "16px"}}><span style={{color: "#ff5a5a"}}>确认操作后，将提交审核结果，</span> 你还要继续吗？</div>
			),
			icon: <ExclamationCircleOutlined />,
			okText: '确定',
			cancelText: '取消',
			onOk() {
				run({
					auditInfo: submitD,
					auditType:"1"
				})
			},
			onCancel() {
			},
		});
	}

	// 筛选ID类型
	const filterIDType = (IdType, actRole) => {
		if ( IdType === 'NI') {
			return '身份证'
		  } else if ( IdType === 'PP') {
			return  '护照'
		  } else if ( IdType === 'PSPT') {
			return  '护照'
		  } else {
			return  '其他'
		  }
	}

	const items = submitD.map((v, i)=>{
		return (
			<div key={v.idNo+i} style={{display: (i===initNum)?"flex":"none"}} className={styles.content}>
				<div className={styles.personImg}>
					<Zmage src={`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${v.imgUrl}`} />
				</div>
				<div className={styles.personInfo}>
					<div>
						<span>
							{v.actRole === '0'?'申领人':'代领人'}姓名
						</span>
						<span>
							{v.paxName} {v.actRole !== '0'?(v.withBaby === 'Y' ? (<span style={{color:"#999"}}>（含婴儿补偿）</span>) : ''):''}
						</span>
					</div>
					<div>
						<span>
							证件类型
						</span>
						<span>
						{filterIDType(v.idType,v.actRole)}
						</span>
					</div>
					<div>
						<span>
							证件号码
						</span>
						<span>
							{v.idNo}
						</span>
					</div>
					<Divider dashed={true} />
					<div>
						<span>审核：</span>
						<span>
							<Radio.Group onChange={(e)=> {
								if (e.target.value === 2) {
									disableBtnFalse();
									if (v.refuse) {
										handleDisabled(false)
									} else {
										handleDisabled(true)
									}
								} else {
									handleDisabled(false)
									disableBtnTrue();
								}
								v={...v, auditOpinion: e.target.value};
								submitD[i] = v;
								handleSubmitD(Array.from(submitD));
							}} value={(v.auditOpinion?v.auditOpinion:1)}>
								<Radio value={1}>通过</Radio>
								<Radio value={2}>拒绝</Radio>
							</Radio.Group>
						</span>
					</div>
					<div>
						<span><span style={{color: 'red'}}>*</span>拒绝原因：</span>
						<span>
							<Select value={v.refuse&&v.refuse} onChange={(value) => {
								if (value) {
									handleDisabled(false)
								} else {
									handleDisabled(true)
								}
								if (value === '其他') {
									v={...v, refuse: value, disabledR: true};
								} else {
									v={...v, refuse: value, disabledR: false};
								}
								submitD[i] = v;
								handleSubmitD(Array.from(submitD));
							}} disabled={v.auditOpinion===2?false:true} size="small" style={{width: "100%"}} placeholder="请选择拒绝原因">
								{options}
							</Select>
						</span>
					</div>
					<div>
						<span>说明：</span>
						<span>
							<TextArea maxLength={20} placeholder="最大输入20字符" value={v.remark?v.remark:''} onChange={(e) => {
								v={...v, remark: e.target.value};
								submitD[i] = v;
								handleSubmitD(Array.from(submitD));
							}} disabled={(v.auditOpinion===2)?false:true} rows={2} />
						</span>
					</div>
				</div>
			</div>
		)
	})
    return (
			<Modal 
					destroyOnClose={true}
					onCancel={()=>{handleModal(false);handleNum(0)}}
					footer={[
						<div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}} key="footer">
							<span>
							第{initNum+1}位，共{count}位
							</span>
							<div>
								<Button onClick={()=>{prevousStep(submitD[initNum], initNum)}} className={(initNum+1)>1 && (initNum+1) <= count ? styles.show : styles.hide}>上一位</Button>
								<Button disabled={disubmit} className={((initNum+1) === count || count===1 ) ? styles.hide : styles.show} onClick={()=>nextStep(submitD[initNum], initNum)} type="primary">下一位</Button>
								<Button disabled={disubmit} loading={loading} onClick={submitData} className={((initNum+1) === count || count===1) ? styles.show : styles.hide} type="primary">提交</Button>
							</div>
						</div>
					]}
					width={640}
					title={[
					<span key="title" style={{fontSize: "18px", color: "#000", fontWeight: "bold"}}>{submitD[initNum]?.actRole === '1'?'代':'申'}领旅客信息</span>
					]}
					visible={modalVisible}
        >
					{items}
			</Modal>
    )
}

export default CheckList;
